<style lang="less" scoped>
  .search_wrap {
    // 首页主题
    &.home {position: fixed; background-color: rgba(0, 0, 0, 0.3);}
    &.home .left {background-color: rgba(255, 255, 255, 0.5);}
    &.home .left .search_icon {color: #fff;}
    &.home .right {background-color: #555;}
    &.home .right > span {background: url("/static/images/icon_ld_t.png") no-repeat 0 0; background-size: 100%;}
    &.home ::-webkit-input-placeholder {color: #fff;}
    // 分类页面主题
    &.type {position: fixed; background-color: rgba(255, 255, 255, 1);}
    &.type .left {background-color: #eee;}
    &.type .left .search_icon {color: #999;}
    &.type .right {background-color: #eee;}
    &.type .right > span {background: url("/static/images/icon_ld_f.png") no-repeat 0 0; background-size: 100%;}
    &.type ::-webkit-input-placeholder {color: #999;}
    // 搜索页面主题
    &.search {position: relative; background-color: rgba(255, 255, 255, 1);}
    &.search .left {background-color: #eee;}
    &.search .left .search_icon {color: #999;}
    &.search .right {width: 0.7rem; background-color: #eee; text-align: center;}
    &.search .right > span {background: url("/static/images/icon_ld_f.png") no-repeat 0 0; background-size: 100%;}
    &.search ::-webkit-input-placeholder {color: #999;}
    &.type ::-webkit-input-placeholder {color: #999;}
    // 搜索组件公共样式
    width: 100%; z-index: 9; padding: 0.16rem 0.3rem;  overflow: hidden;
    .left {float: left; position: relative; padding: 0 0.23rem; background-color: #eee; border-radius: 0.3rem;}
    .left input {display: block; width: 5.7rem; height: 0.6rem;line-height: 0.6rem; border: 0; font-size: 0.28rem;}
    .left .search_icon {position: absolute; right: 0.23rem; top: 50%; margin-top: -0.2rem;}
    .right {float: right; position: relative; width: 0.57rem; height: 0.57rem; border-radius: 50%; }
    .right.ss {background-color: #fff; line-height: 0.57rem; font-size: 0.28rem; color: #d3ac6f;}
    .right > span {display: block; width: 0.45rem; height: 0.45rem; margin: 0.05rem auto 0; background: url("/static/images/icon_ld_t.png") no-repeat 0 0; background-size: 100%;}
    .right span i {position: absolute; right: 0.05rem; top: 0.05rem; color: #fff; width: 0.25rem; text-align: center; height: 0.25rem; font-size: 0.18rem; background-color: rgb(217, 22, 22); border-radius: 50%;}

  }
</style>
<template>
<!-- <div style="height: 0.89rem;"> -->
  <div class="search_wrap" :class="ins">
    <div class="left" @click="jump">
      <input type="text" placeholder="请输入商品名或关键字搜索">
      <yd-icon class="search_icon" name="search" size="0.38rem"></yd-icon>
    </div>
    <div v-if="ins != 'search'" class="right ld">
      <span><i>1</i></span>
    </div>
    <div v-else class="right ss">搜索</div>
  </div>
<!-- </div> -->
</template>
<script>
  export default {
    // home type search
    props: ['ins'],
    methods: {
      jump() {
        if (this.ins == 'home' || this.ins == 'type') {
          this.$router.push({path: '/Search'})
        }
      }
    }
  }
</script>
